/**
 * 页面布局相关的可复用逻辑
 */
import { onMounted, ref } from 'vue'

/**
 * 获取设备信息和安全区域高度
 * @returns {object} 状态栏高度和底部安全区域高度
 */
export function useDeviceInfo() {
  const statusBarHeight = ref(0)
  const safeAreaBottom = ref(0)

  onMounted(() => {
    // 获取状态栏高度和安全区域信息
    uni.getSystemInfo({
      success: (res) => {
        statusBarHeight.value = res.statusBarHeight || 0

        // 获取底部安全区域高度
        if (res.safeAreaInsets) {
          // 优先使用系统提供的安全区域数据
          safeAreaBottom.value = res.safeAreaInsets.bottom || 0
        }
        else if (res.safeArea && res.screenHeight) {
          // 计算底部安全区域
          safeAreaBottom.value = res.screenHeight - res.safeArea.bottom
        }
      },
    })
  })

  return {
    statusBarHeight,
    safeAreaBottom,
  }
}

/**
 * 底部标签栏管理
 * @returns {object} 标签栏状态和方法
 */
export function useTabBar() {
  const activeTab = ref(0) // 当前选中的 Tab 索引
  const TAB_STORAGE_KEY = 'activeTab'

  // 标签页配置
  const tabs = [
    { title: '首页', name: 'index', icon: 'home' },
    { title: '消息', name: 'message', icon: 'list' },
    { title: '邮件', name: 'workHome', icon: 'mail' },
    { title: '我的', name: 'user', icon: 'user' },
  ]

  onMounted(() => {
    // 隐藏原生tabBar
    uni.hideTabBar()

    // 从本地存储中读取当前选中的 Tab
    try {
      const storedTab = uni.getStorageSync(TAB_STORAGE_KEY)

      // 判断存储值是否有效
      if (storedTab !== null && storedTab !== undefined && storedTab !== '') {
        activeTab.value = Number(storedTab)
      }
      else {
        // 不存在时设置默认值0并存入存储
        setDefaultTab()
      }
    }
    catch (error) {
      console.error('读取Tab索引失败:', error)
      setDefaultTab()
    }
  })

  // 设置默认标签页
  function setDefaultTab() {
    activeTab.value = 0
    uni.setStorageSync(TAB_STORAGE_KEY, 0)
    navigateToTab('index')
  }

  // 切换 Tab
  function switchTab(index, name) {
    activeTab.value = index
    uni.setStorageSync(TAB_STORAGE_KEY, index) // 将当前选中的 Tab 存储到本地
    navigateToTab(name)
  }

  // 导航到指定标签页
  function navigateToTab(name) {
    uni.reLaunch({
      url: `/pages/${name}/index`, // 跳转到对应的页面
    })
  }

  return {
    activeTab,
    tabs,
    switchTab,
  }
}

/**
 * 导航栏操作
 * @returns {object} 导航栏图标和方法
 */
export function useNavBar() {
  // 导航栏图标
  const backIcon = 'arrow-left'
  const rightIcon = 'more'

  // 返回按钮点击
  function goBack() {
    // 判断是否可以返回上一页
    const pages = getCurrentPages()
    if (pages.length > 1) {
      uni.navigateBack()
    }
    else {
      console.log('已经是第一页，无法返回')
    }
  }

  // 右侧图标点击
  function onRightIconClick() {
    console.log('右侧图标点击')
  }

  return {
    backIcon,
    rightIcon,
    goBack,
    onRightIconClick,
  }
}
